import './TabBarNav.less';

import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom';

interface TabBarNavProps {
    isFixed?: boolean;
}

export default class TabBarNav extends Component<TabBarNavProps> {
    public render() {
        return (
            <nav className={`nav ${this.props.isFixed && 'nav--fixed'}`}>
                <NavLink activeClassName="nav_link--active" className="nav_link" to="/user">
                    <i className="nav_link-icon fas fa-user" />
                    <br />
                    <span className="nav_link-tile">我的</span>
                </NavLink>
                <NavLink activeClassName="nav_link--active" className="nav_link" to="/fm">
                    <i className="nav_link-icon fas fa-podcast" />
                    <br />
                    <span className="nav_link-tile">FM</span>
                </NavLink>
                <NavLink activeClassName="nav_link--active" className="nav_link" to="/discover">
                    <i className="nav_link-icon fas fa-satellite-dish" />
                    <br />
                    <span className="nav_link-tile">探索</span>
                </NavLink>
                <NavLink activeClassName="nav_link--active" className="nav_link" to="/follow">
                    <i className="nav_link-icon fas fa-rss" />
                    <br />
                    <span className="nav_link-tile">收听</span>
                </NavLink>
                <NavLink activeClassName="nav_link--active" className="nav_link" to="/message">
                    <i className="nav_link-icon fas fa-comment" />
                    <br />
                    <span className="nav_link-tile">讯息</span>
                </NavLink>
            </nav>
        );
    }
}
